import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { NavLink } from 'react-router-dom'

import { discoverMenu } from '@/assets/data/local_data'
import { NavBarWrapper } from './style'

interface IProps {
  children?: ReactNode
}

const ComponentName: FC<IProps> = () => {
  // 二级导航渲染
  const renderDiscoverMenu = () => {
    return discoverMenu.map((item) => {
      return (
        <li className="discover_item" key={item.title}>
          <NavLink to={item.link} className="menu_item">
            {item.title}
          </NavLink>
        </li>
      )
    })
  }

  return (
    <NavBarWrapper>
      <div className="center_wrap wrap-v1">
        <ul className="discover_menu">{renderDiscoverMenu()}</ul>
      </div>
    </NavBarWrapper>
  )
}

export default memo(ComponentName)
